<!-- 提货专区提货订单详情 -->
<template>
	<view class="orderDetail">
		<uni-nav-bar @clickLeft="back" leftIcon="back" :title="orderData._status?orderData._status._title:''"></uni-nav-bar>
		<!-- 订单信息  收货 -->
		<view class="messages" v-if="orderData.paid !== 0">
			<!-- 第一排 -->
			<view class="express">
				<image src="../static/images/awd.png" mode=""></image>
				<view class="son" v-if="orderData.status == 0">
					<text class="clamp">订单已提交，请等待公司发货</text>
					<text>{{orderData._add_time}}</text>
				</view>
				<view class="son" v-if="orderData.status == 1||orderData.status == 2||orderData.status == 3" @tap="express">
					<text class="clamp">{{expressfirtinfo}}</text>
					<text>{{expressfirttime}}</text>
				</view>
				<text class="yticon icon-you" v-if="orderData.status == 1||orderData.status == 2||orderData.status == 3"></text>
			</view>
		</view>
		<!-- 收货地址 -->
		<view class="site">
			<image class="addressIcon" src="../static/images/1address.png" mode="aspectFit"></image>
			<view class="addressInfo">
				<view class="name">
					<text>{{orderData.real_name}}</text>
					<text>{{orderData.user_phone}}</text>
				</view>
				<text class="sit">{{orderData.user_address}}</text>
			</view>
		</view>
		<!-- 标题 -->
		<view class="storeTitle">
			<!-- <image :src="orderData.online_logo" mode=""></image> -->
			<text class="title">{{orderData.online_name}}</text>
		</view>
		<!-- 商品列表 -->
		<view class="titleitem">
			<view class="item" v-for="(item, index) in orderData.cartInfo" :key="index">
				<!-- 图片 -->
				<view class="img">
					<image :src="item.productInfo.image" mode=""></image>
				</view>
				<!-- 信息 -->
				<view class="msg">
					<text class="clamp2">{{item.productInfo.store_name}}</text>
					<view class="a">
						<text class="spec clamp">{{item.productInfo.attrInfo?item.productInfo.attrInfo.suk:''}}</text>
						<text class="num">× {{item.cart_num}}</text>
					</view>
					<view class="b">
						<view class="goodsPrice" v-if="item.productInfo.attrInfo">{{item.productInfo.attrInfo.price}}</view>
						<view class="goodsPrice" v-else>{{item.productInfo.price}}</view>
						<view class="addCart" @tap="addCart(item)">
							<image src="../static/images/smallPlus.png" mode=""></image>
							<text>加入提货栏</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="cellBox">
				<view class="cell">
					<text class="a">提货编号:</text>
					<text class="b">{{orderData.order_id}}</text>
				</view>
				<view class="cell">
					<text class="a">提货时间:</text>
					<text class="b">{{orderData._add_time}}</text>
				</view>
				<view class="cell">
					<text class="a">共计提货卡点:</text>
					<text class="b">{{orderData.total_price}} 点</text>
				</view>
				<view class="cell">
					<text class="a">运费:</text>
					<text class="b">{{orderData.total_postage}} 元</text>
				</view>
				<view class="cell">
					<text class="a">余额抵扣:</text>
					<text class="b">{{orderData.use_now_money}} 元</text>
				</view>
				<!-- <view class="cell" v-if="[1,2].includes(orderData.status)">
					<text class="a">快递商家:</text>
					<text class="b">{{orderData.delivery_name}}</text>
				</view>
				<view class="cell" v-if="[1,2].includes(orderData.status)">
					<text class="a">快递单号:</text>
					<text class="b">{{orderData.delivery_id}}</text>
				</view> -->
				<view class="payPrice">
					{{orderData.pay_price}}
				</view>
			</view>
		</view>
		<view class="cut"></view>
		<view class="footer">
			<view class="btn" @tap="back">提货记录</view>
			<view class="btn active" @tap="goMall">VIP提货专区</view>
		</view>
	</view>
</template>

<script>
	import {
		takeOrderDetail,
		orderExpress,
		takeCartAdd
	} from "@/api/mall.js"
	export default {
		data() {
			return {
				id: '',
				orderData: {},
				expressfirtinfo: '', //最新物流信息
				expressfirttime: '', //最新物流时间
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getOrderDetail()
		},
		methods: {
			//获取订单详情
			getOrderDetail() {
				takeOrderDetail(this.id).then(res => {
					this.orderData = res.data
					if (res.data.status == 1 || res.data.status == 2 || res.data.status == 3) {
						orderExpress(this.id).then(res => {
							if (res.data.express.data.length > 0) {
								this.expressfirtinfo = res.data.express.data[0].context
								this.expressfirttime = res.data.express.data[0].time
							} else {
								this.expressfirtinfo = "暂无物流信息"
								this.expressfirttime = "请耐心等待"
							}
						})
					}
				})
			},
			// 添加提货栏
			addCart(item) {
				uni.showLoading({mask:true})
				takeCartAdd({
					productId: item.product_id,
					cartNum: 1,
					uniqueId: item.product_attr_unique,
					new: 0,
					take_card_id: this.orderData.take_delivery_card_id,
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: "加入提货栏成功"
					})
				})
			},
			// 查看物流
			express() {
				uni.navigateTo({
					url: "/mall/order/express?id=" + this.id
				})
			},
			// 返回消费记录
			back() {
				uni.navigateBack({

				})
			},
			goMall() {
				uni.reLaunch({
					url: "./pickCardMall"
				})
			}
		}
	};
</script>
<style>
	page{
		background: #fafafa;
	}
</style>
<style lang="scss" scoped>
	// 订单信息 收货
	.messages {
		padding: 0 24rpx;
		background: #fff;
	
		.express {
			position: relative;
			height: 168rpx;
			display: flex;
			align-items: center;
	
			image {
				width: 58rpx;
				height: 58rpx;
				border-radius: 40rpx;
			}
	
			.son {
				margin-left: 30rpx;
				width: 550upx;
				height: 80upx;
				position: relative;
	
				text:nth-of-type(1) {
					font-size: 32upx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}
	
				text:nth-of-type(2) {
					font-size: 22upx;
					color: rgba(153, 153, 153, 1);
				}
	
				image {
					position: absolute;
					top: 18upx;
					right: 32upx;
					height: 22upx;
					width: 22upx;
				}
			}
	
			.icon-you {
				position: absolute;
				color: #666;
				right: 0;
				top: 50%;
				margin-top: -10rpx;
			}
		}
	}
	
	.site {
		position: relative;
		z-index: 2;
		background-color: #fff;
		border-bottom: 20rpx solid #fafafa;
		padding: 30rpx 24rpx;
		display: flex;
		align-items: center;

		.addressIcon {
			width: 58rpx;
			height: 58rpx;
			margin-right: 30rpx;
		}

		.addressInfo {
			.name {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				display: flex;
				font-weight: bold;
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;

				text:nth-of-type(1) {
					margin-right: 20rpx;
				}
			}

			.sit {
				font-size: 28rpx;
				color: #999;
			}
		}



	}

	
	// 标题
	.storeTitle {
		background: #fff;
		padding: 0 24rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		line-height: 80rpx;
		color: #333;
		border-bottom: 1rpx solid #f4f4f4;

		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}

		.title {
			margin-left: 15rpx;
			font-size: 28rpx;
			font-weight: bold;
		}

		.icon-you {
			margin-top: 4rpx;
			margin-left: 15rpx;
			font-size: 28rpx;
		}
	}

	.titleitem {
		background: #fff;
		border-bottom: 20rpx solid #fafafa;
		padding: 0 24rpx 40rpx;

		.item {
			display: flex;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f4f4f4;

			.img {
				width: 164rpx;
				height: 164rpx;
				margin-right: 50rpx;
				background: rgba(220, 220, 220, 1);

				image {
					width: 164rpx;
					height: 164rpx;
				}
			}

			.msg {
				width: 488rpx;

				.clamp2 {
					height: 90rpx;
					line-height: 45rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}

				.a {
					margin-top: 30rpx;
					display: flex;
					font-size: 28rpx;
					color: #999;
					justify-content: space-between;

					.spec {
						flex: 1;
						margin-right: 20rpx;
					}
				}

				.b {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;

					.goodsPrice {
						font-size: 40rpx;
						font-weight: 500;
						color: #F7453E;

						&:after {
							content: ' 点';
							font-size: 24rpx;
							font-weight: 500;
						}
					}

					.addCart {
						display: flex;
						align-items: center;

						image {
							width: 34rpx;
							height: 34rpx;
							margin-right: 10rpx;
						}

						text {
							font-size: 24rpx;
							color: #FBC866;
						}
					}

				}

				.btn {
					float: right;
					font-size: 22rpx;
					height: 56rpx;
					line-height: 56rpx;
					padding: 0 30rpx;
					margin-top: 20rpx;
					border: 1rpx solid #999;
					color: #333;
					border-radius: 30rpx;
				}
			}
		}
	}

	.info {
		background: #fff;
		padding: 20rpx 0;

		.cellBox {
			padding: 10rpx 24rpx;
			font-size: 28rpx;

			.cell {
				line-height: 70rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.a {
					font-size: 28rpx;
					color: #666;
				}

				.b {
					font-size: 24rpx;
					color: #666;
				}
			}

			.payPrice {
				padding-top: 26rpx;
				margin-top: 20rpx;
				text-align: right;
				border-top: 1rpx solid #eee;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;

				&::before {
					content: "支付金额：";
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				&::after {
					content: " 元";
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}

	.cut {
		height: 160rpx;
		height: calc(env(safe-area-inset-bottom) + 160rpx);
	}


	.footer {
		position: fixed;
		width: 750rpx;
		bottom: 0;
		padding: 30rpx 30rpx 30rpx;
		padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		z-index: 1;
		box-shadow: 0px -5px 4px 0px rgba(51, 51, 51, 0.02);
		background-color: #fff;

		.btn {
			width: 250rpx;
			height: 80rpx;
			border: 2rpx solid #FBC866;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 32rpx;
			color: #FBC866;

			&.active {
				margin-left: 24rpx;
				color: #fff;
				background-color: #FBC866;
			}
		}

	}
</style>
